<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= title %>
    </title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div class="container">
        <header>
            <h1>
                <%= title %>
            </h1>
        </header>

        <main>
            <div class="actions">
                <a href="/student/list" class="btn btn-secondary">返回学生列表</a>
            </div>

            <% if (typeof error !== 'undefined' && error) { %>
                <div class="alert alert-error">
                    <%= error %>
                </div>
                <% } else if (stats) { %>

                    <!-- 统计卡片 -->
                    <div class="stats-cards">
                        <div class="stat-card">
                            <div class="stat-icon">👥</div>
                            <div class="stat-info">
                                <h3>
                                    <%= stats.total %>
                                </h3>
                                <p>总学生数</p>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon">📊</div>
                            <div class="stat-info">
                                <h3>
                                    <%= stats.scoreStats.avgScore ? stats.scoreStats.avgScore.toFixed(1) : '0' %>
                                </h3>
                                <p>平均成绩</p>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon">🏆</div>
                            <div class="stat-info">
                                <h3>
                                    <%= stats.scoreStats.maxScore || '0' %>
                                </h3>
                                <p>最高成绩</p>
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-icon">📚</div>
                            <div class="stat-info">
                                <h3>
                                    <%= stats.majorStats.length %>
                                </h3>
                                <p>专业数量</p>
                            </div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="charts-container">
                        <!-- 性别分布饼图 -->
                        <div class="chart-section">
                            <h3>性别分布</h3>
                            <div class="chart-wrapper">
                                <canvas id="genderChart"></canvas>
                            </div>
                        </div>

                        <!-- 成绩等级分布 -->
                        <div class="chart-section">
                            <h3>成绩等级分布</h3>
                            <div class="chart-wrapper">
                                <canvas id="scoreChart"></canvas>
                            </div>
                        </div>

                        <!-- 专业分布柱状图 -->
                        <div class="chart-section full-width">
                            <h3>专业分布</h3>
                            <div class="chart-wrapper">
                                <canvas id="majorChart"></canvas>
                            </div>
                        </div>

                        <!-- 年龄分布 -->
                        <div class="chart-section full-width">
                            <h3>年龄分布</h3>
                            <div class="chart-wrapper">
                                <canvas id="ageChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- 详细统计表 -->
                    <div class="detailed-stats">
                        <div class="stats-section">
                            <h3>专业详细统计</h3>
                            <table class="stats-table">
                                <thead>
                                    <tr>
                                        <th>专业</th>
                                        <th>学生数量</th>
                                        <th>占比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% stats.majorStats.forEach(function(major) { %>
                                        <tr>
                                            <td>
                                                <%= major.major %>
                                            </td>
                                            <td>
                                                <%= major.count %>
                                            </td>
                                            <td>
                                                <%= ((major.count / stats.total) * 100).toFixed(1) %>%</td>
                                        </tr>
                                        <% }); %>
                                </tbody>
                            </table>
                        </div>

                        <div class="stats-section">
                            <h3>成绩分布详情</h3>
                            <table class="stats-table">
                                <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>分数段</th>
                                        <th>人数</th>
                                        <th>占比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="excellent">
                                        <td>优秀</td>
                                        <td>90-100</td>
                                        <td>
                                            <%= stats.scoreStats.excellent %>
                                        </td>
                                        <td>
                                            <%= ((stats.scoreStats.excellent / stats.total) * 100).toFixed(1) %>%</td>
                                    </tr>
                                    <tr class="good">
                                        <td>良好</td>
                                        <td>80-89</td>
                                        <td>
                                            <%= stats.scoreStats.good %>
                                        </td>
                                        <td>
                                            <%= ((stats.scoreStats.good / stats.total) * 100).toFixed(1) %>%</td>
                                    </tr>
                                    <tr class="average">
                                        <td>中等</td>
                                        <td>70-79</td>
                                        <td>
                                            <%= stats.scoreStats.average %>
                                        </td>
                                        <td>
                                            <%= ((stats.scoreStats.average / stats.total) * 100).toFixed(1) %>%</td>
                                    </tr>
                                    <tr class="pass">
                                        <td>及格</td>
                                        <td>60-69</td>
                                        <td>
                                            <%= stats.scoreStats.pass %>
                                        </td>
                                        <td>
                                            <%= ((stats.scoreStats.pass / stats.total) * 100).toFixed(1) %>%</td>
                                    </tr>
                                    <tr class="fail">
                                        <td>不及格</td>
                                        <td>0-59</td>
                                        <td>
                                            <%= stats.scoreStats.fail %>
                                        </td>
                                        <td>
                                            <%= ((stats.scoreStats.fail / stats.total) * 100).toFixed(1) %>%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <% } %>
        </main>

        <footer>
            <p>&copy; 2025 学生信息管理系统(小何技术支持)</p>
        </footer>
    </div>

    <% if (stats) { %>
        <script>
            // 性别分布饼图
            const genderCtx = document.getElementById('genderChart').getContext('2d');
            new Chart(genderCtx, {
                type: 'pie',
                data: {
                    labels: [<% stats.genderStats.forEach(function(item, index) { %>
                        '<%= item.gender %>'
                        <%= index < stats.genderStats.length - 1 ? ',' : '' %>
                        <% }); %>
                    ],
                    datasets: [{
                        data: [<% stats.genderStats.forEach(function(item, index) { %>
                            <%= item.count %>
                            <%= index < stats.genderStats.length - 1 ? ',' : '' %>
                            <% }); %>
                        ],
                        backgroundColor: ['#36A2EB', '#FF6384']
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // 成绩等级分布
            const scoreCtx = document.getElementById('scoreChart').getContext('2d');
            new Chart(scoreCtx, {
                type: 'doughnut',
                data: {
                    labels: ['优秀(90-100)', '良好(80-89)', '中等(70-79)', '及格(60-69)', '不及格(0-59)'],
                    datasets: [{
                        data: [
                            <%= stats.scoreStats.excellent %>,
                            <%= stats.scoreStats.good %>,
                            <%= stats.scoreStats.average %>,
                            <%= stats.scoreStats.pass %>,
                            <%= stats.scoreStats.fail %>
                        ],
                        backgroundColor: ['#4BC0C0', '#36A2EB', '#FFCE56', '#FF9F40', '#FF6384']
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // 专业分布柱状图
            const majorCtx = document.getElementById('majorChart').getContext('2d');
            new Chart(majorCtx, {
                type: 'bar',
                data: {
                    labels: [<% stats.majorStats.forEach(function(item, index) { %>
                        '<%= item.major %>'
                        <%= index < stats.majorStats.length - 1 ? ',' : '' %>
                        <% }); %>
                    ],
                    datasets: [{
                        label: '学生数量',
                        data: [<% stats.majorStats.forEach(function(item, index) { %>
                            <%= item.count %>
                            <%= index < stats.majorStats.length - 1 ? ',' : '' %>
                            <% }); %>
                        ],
                        backgroundColor: '#36A2EB'
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });

            // 年龄分布
            const ageCtx = document.getElementById('ageChart').getContext('2d');
            new Chart(ageCtx, {
                type: 'line',
                data: {
                    labels: [<% stats.ageStats.forEach(function(item, index) { %>
                        <%= item.age %>
                        <%= index < stats.ageStats.length - 1 ? ',' : '' %>
                        <% }); %>
                    ],
                    datasets: [{
                        label: '学生数量',
                        data: [<% stats.ageStats.forEach(function(item, index) { %>
                            <%= item.count %>
                            <%= index < stats.ageStats.length - 1 ? ',' : '' %>
                            <% }); %>
                        ],
                        borderColor: '#FF6384',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '年龄'
                            }
                        }
                    }
                }
            });
        </script>
        <% } %>
</body>

</html>